<template>
  <div class="app-container" style="padding:1vh 4vw">
    <el-row style="margin: 6vh 2vw;">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-input
          v-model="query"
          class="filter-item"
          clearable
          @clear="this.getUsers"
          @blur="handleFilter"
          placeholder="输入关键字搜索"
          prefix-icon="el-icon-search"
          style="width: 70%;"
        />
        <el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-edit" @click="handleCreate">
          添加
        </el-button>
      </el-col>
    </el-row>

    <div class="table-container" style="margin: 0 2vw;">
      <el-table highlight-current-row fit :data="userList" style="width: 100%;" max-height="800" :size="handleSize()" tooltip-effect="light">
<!--        <el-table-column fixed sortable prop="id" label="ID" max-width="200" min-width="100"/>-->
        <el-table-column prop="name" label="用户" max-width="400" min-width="200" align="center">
          <template v-slot="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>性别: {{ scope.row.gender }}</p>
              <p>学号: {{ scope.row.number }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年级" max-width="200" min-width="100" />
        <el-table-column prop="college" label="学院" max-width="300" min-width="150"/>
        <el-table-column prop="major" label="专业" smax-width="300" min-width="150"/>
        <el-table-column prop="clazz" label="班级" max-width="200" min-width="100"/>
        <el-table-column label="操作" align="center" max-width="400" min-width="200">
          <template v-slot="scope">
            <el-button v-show="device() !== 'mobile'" size="mini" @click="handleUpdate(scope.row)"  type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
            <el-button v-show="device() === 'mobile'" size="mini" @click="handleUpdate(scope.row)"  type="primary" icon="el-icon-edit" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete" circle/>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="device() === 'mobile'">
      <el-form :v-model="postForm" ref="dataForm" :rules="rules" :label-position="device() === 'mobile' ? 'top' : 'left'" label-width="70px" style="width: 400px; margin-left:50px;" :size="handleSize()">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="postForm.name" style="width: 200px" :size="handleSize()"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="postForm.gender" class="filter-item" style="width: 200px" :size="handleSize()" placeholder="">
            <el-option v-for="item in genderOptions" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="学号" prop="number">
          <el-input v-model="postForm.number" style="width: 350px" :size="handleSize()"/>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-select v-model="postForm.grade" class="filter-item" style="width: 200px" :size="handleSize()" placeholder="">
            <el-option v-for="item in gradeOptions" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="college">
          <el-select v-model="postForm.college" class="filter-item" style="width:350px;" :size="handleSize()" placeholder="">
            <el-option v-for="item in collegeOptions" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="postForm.major" style="width: 350px" :size="handleSize()"/>
        </el-form-item>
        <el-form-item label="班级" prop="clazz">
          <el-input v-model="postForm.clazz" style="width: 200px" :size="handleSize()"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false" :size="handleSize()">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" :size="handleSize()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {changeUser, deleteUser, indexUser} from "@/api/admin/user";
import { indexAdmin } from '@/api/admin/admin'

const genderOptions = [
  { value: '男' },
  { value: '女' }
]

const gradeOptions = [
  { value: '大一' },
  { value: '大二' },
  { value: '大三' },
  { value: '大四' }
]

const collegeOptions = [
  { value: '管理学院' },
  { value: '经济学院' },
  { value: '珠宝学院' },
  { value: '建筑学院' },
  { value: '国际商学院' },
  { value: '外国语学院' },
  { value: '土木工程学院' },
  { value: '电气工程学院' },
  { value: '汽车与交通工程学院' },
  { value: '计算机工程学院暨大数据学院' },
  { value: '机械工程学院暨机器人工程学院' },
  { value: '电子信息学院暨中兴通讯工程学院' }
]

const defaultForm = {
  id: undefined,
  name: '',
  gender: '',
  number: '',
  grade: '',
  college: '',
  major: '',
  clazz: ''
}

export default {
  data() {
    return {
      gradeOptions,
      collegeOptions,
      genderOptions,
      currentPage: 0,
      lastPage: 0,
      total: 0,
      perPage: 0,
      query: '',
      dialogStatus: '',
      dialogFormVisible: false,
      textMap: {
        create: '创建',
        update: '编辑'
      },
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
        number: [{ required: true, message: '必填', trigger: 'blur' }],
        // college: [{ required: true, message: '必填', trigger: 'change' }]
      },
      postForm: Object.assign({}, defaultForm),
      userList: []
    }
  },
  created() {
    // 从服务器端获取 用户列表
    this.currentPage = 1;
    this.getUsers()
  },
  methods: {
    // 获取用户列表
    async getUsers() {
      const res = await indexUser({ page:this.currentPage })
      this.userList = res.data.data
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 搜索
    async handleFilter() {
      if (this.query !== '') {
        const res = await indexUser({ name:this.query,  page: this.currentPage})
        this.userList = res.data.data
        this.currentPage = res.data.currentPage
        this.lastPage = res.data.lastPage
        this.total = res.data.total
        this.perPage = res.data.perPage
      } else {
        this.getUsers()
      }
    },
    // 获取 当前设备类型
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备类型控制 尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 分页
    change(e) {
      this.currentPage = e;
      this.getUsers();
    },
    // 创建用户
    handleCreate() {
      this.postForm = Object.assign({}, defaultForm)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    // 编辑用户
    handleUpdate(row) {
      // 复制对象
      this.postForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 删除用户
    handleDelete(row) {
      this.$confirm('确定删除此活动', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          deleteUser({ id: row.id }).then(async() => {
            this.getUsers()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
        .catch(err => {
          console.error(err)
        });
    },
    // 创建数据
    async createData() {
      changeUser({
        name: this.postForm.name, number: this.postForm.number,
        gender: this.postForm.gender, grade: this.postForm.grade, college: this.postForm.college,
        clazz: this.postForm.clazz, major: this.postForm.major
      }).then(() => {
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        })
      }).then(async() => {
        this.dialogFormVisible = false
        this.getUsers()
      })
      // this.$refs.dataForm.validate(valid => {
      //   if (valid) {
      //     console.log("!!!!")
      //     this.loading = true
      //     changeUser({ name: this.postForm.name, number: this.postForm.number,
      //       gender: this.postForm.gender, grade: this.postForm.grade, college: this.postForm.college,
      //       clazz: this.postForm.clazz, major: this.postForm.major}).then(() => {
      //       this.$notify({
      //         title: '成功',
      //         message: '创建成功',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }else {
      //     console.log('发布失败!!')
      //     this.$notify({
      //       title: '失败',
      //       message: '创建失败',
      //       type: 'danger',
      //       duration: 2000
      //     })
      //   }
      // })
      // this.dialogFormVisible = false
      // this.loading = false
      // 重新获取数据
      // await this.getUsers()
    },
    // 更新数据
    updateData() {
      changeUser({ id: this.postForm.id, name: this.postForm.name, number: this.postForm.number,
        gender: this.postForm.gender, grade: this.postForm.grade, college: this.postForm.college,
        clazz: this.postForm.clazz, major: this.postForm.major}).then(() => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
      }).then(async ()=>{
        this.dialogFormVisible = false
        // 重新获取数据
        this.getUsers()
      })
      // this.$refs.dataForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     changeUser(this.postForm).then(() => {
      //       this.$notify({
      //         title: '成功',
      //         message: '修改成功',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }else {
      //     console.log('发布失败!!')
      //     this.$notify({
      //       title: '失败',
      //       message: '修改失败',
      //       type: 'danger',
      //       duration: 2000
      //     })
      //   }
      //   this.dialogFormVisible = false
      //   this.loading = false
      //   // 重新获取数据
      //   this.getUsers()
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin-top: 30px;
  //margin-left: 2rem;
  //margin-right: 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .filter-container {
    //margin-right: 30px;
    //margin-left: 30px;
    //margin-top: 30px;
  }
}
</style>

<!--{-->
<!--id: 1,-->
<!--name: '王小虎',-->
<!--gender: '男',-->
<!--number: '202210089001',-->
<!--grade: '大一',-->
<!--college: '经济学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '5班'-->
<!--}-->
<!--, {-->
<!--id: 2,-->
<!--name: '王小虎',-->
<!--gender: '男',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '4班'-->
<!--}, {-->
<!--id: 3,-->
<!--name: '王小虎',-->
<!--gender: '男',-->
<!--number: '202210089003',-->
<!--grade: '大三',-->
<!--college: '计算机工程学院暨大数据学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '3班'-->
<!--}, {-->
<!--id: 4,-->
<!--name: '王小虎',-->
<!--gender: '男',-->
<!--number: '202210089004',-->
<!--grade: '大四',-->
<!--college: '电气工程学院',-->
<!--major: '大数据',-->
<!--classes: '2班'-->
<!--}, {-->
<!--id: 5,-->
<!--name: '王小虎',-->
<!--number: '202210089005',-->
<!--gender: '男',-->
<!--grade: '大一',-->
<!--college: '电子信息学院暨中兴通讯工程学院',-->
<!--major: '大数据',-->
<!--classes: '1班'-->
<!--}-->
<!--, {-->
<!--id: 6,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '6班'-->
<!--}, {-->
<!--id: 7,-->
<!--name: '王小虎',-->
<!--number: '202210089007',-->
<!--grade: '大三',-->
<!--college: '机械工程学院暨机器人工程学院',-->
<!--major: '软件工程',-->
<!--classes: '7班'-->
<!--}, {-->
<!--id: 8,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '8班'-->
<!--}, {-->
<!--id: 9,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '9班'-->
<!--}, {-->
<!--id: 10,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '10班'-->
<!--}-->
<!--, {-->
<!--id: 11,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '11班'-->
<!--}, {-->
<!--id: 12,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--grade: '大二',-->
<!--college: '汽车与交通工程学院',-->
<!--major: '软件工程',-->
<!--classes: '12班'-->
<!--}, {-->
<!--id: 13,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '13班'-->
<!--}, {-->
<!--id: 14,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '14班'-->
<!--}, {-->
<!--id: 15,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '15班'-->
<!--}, {-->
<!--id: 16,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '16班'-->
<!--}, {-->
<!--id: 17,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '17班'-->
<!--}, {-->
<!--id: 18,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '18班'-->
<!--}, {-->
<!--id: 19,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '19班'-->
<!--}, {-->
<!--id: 20,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--grade: '大二',-->
<!--college: '管理学院',-->
<!--major: '计算机科学与技术',-->
<!--classes: '20班'-->
<!--}-->
